import React, { useEffect } from 'react';
import { IRouteComponentProps } from 'umi';
import { Typography, Row, Col, Input, Button } from 'antd';
const { Title } = Typography;

const isLogin = localStorage.getItem('isLogin');

export default function Login({ history }: IRouteComponentProps) {
  useEffect(() => {
    isLogin && history.push('/');
  }, [isLogin]);

  const onLogin = () => {
    localStorage.setItem('isLogin', '1');
    history.push('/');
  };

  return (
    <div className="flex-center bg">
      <div className="tc p20" style={{ width: 500 }}>
        <Title>
          <div className="white">登录</div>
        </Title>
        <Row>
          <Col span={24} className="pt20 pb20">
            <Input
              size="large"
              addonBefore={<div className="black">账号</div>}
            />
          </Col>
          <Col span={24}>
            <Input
              size="large"
              addonBefore={<div className="black">密码</div>}
            />
          </Col>
          <Col span={24} className="pt20 pb20">
            <Button
              size="large"
              type="primary"
              className="w100p"
              onClick={onLogin}
            >
              登录
            </Button>
          </Col>
        </Row>
      </div>
    </div>
  );
}
